<!--
 * @Author: your name
 * @Date: 2021-08-09 14:58:41
 * @LastEditTime: 2021-08-09 15:09:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day06\05-隐藏.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏</title>
    <style>
        body>p:nth-child(2){
             /* 不占据屏幕位置 */
            display: none;
        }
        body>p:nth-child(4){
             /* 占据屏幕位置 */
            visibility: hidden;
        }
        body>p:nth-child(7){
            /* 占据屏幕位置 */
            opacity: 0;
        }
        body>p:nth-child(8) {
            background-color: mediumspringgreen;
            height:50px;
            /* 对超出父元素的子元素进行隐藏 */
            overflow: hidden;

        }
    </style>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
    <p>段落6</p>
    <p>段落7</p>
    <p>段落8<img src="../网易云案例/12.png" alt=""></p>
    <p>段落9</p>
</body>
</html>